<script setup lang="ts">
import ItemWrap from "@/components/item-wrap"
import LeftTop from "./components/left-top.vue"
import LeftCenter from "./components/left-center.vue"
import LeftBottom from "./components/left-bottom.vue"
import CenterMap from "@/views/index/center-map.vue"
import CenterBottom from "./components/center-bottom.vue"
import RightTop from "./components/right-top.vue"
import RightCenter from "./components/right-center.vue"
import RightBottom from "./components/right-bottom.vue"

import { onMounted } from 'vue'
import autofit, { elRectification } from '@/utils/autofit'
onMounted(() => {
  autofit.init({
    dh: 1080,
    dw: 1920,
    el: "#app",
    resize: true
  })
})

</script>

<template>
  <div class="index-box">
    <div class="contetn_left">
      <LeftTop />
      <LeftCenter />
      <LeftBottom />
    </div>
    <div class="contetn_center">
      <CenterMap class="contetn_center_top" title="设备分布图" />
      <CenterBottom />
    </div>
    <div class="contetn_right">
      <RightTop />
      <RightCenter />
      <RightBottom />
    </div>
  </div>
</template>

<style scoped lang="scss">
.content_wrap {
  width: 100%;
  height: 100%;
  padding: 16px 16px 16px 16px;
  box-sizing: border-box;
  background-image: url("@/assets/img/pageBg.png");
  background-size: cover;
  background-position: center center;
}

.index-box {
  display: flex;
  min-height: calc(100% - 64px);
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 16px 16px 16px 16px;
  box-sizing: border-box;
  background-image: url("@/assets/img/pageBg.png");
  background-size: cover;
  background-position: center center;
}

//左边 右边 结构一样
.contetn_left,
.contetn_right {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  position: relative;
  width: 540px;
  box-sizing: border-box;
  flex-shrink: 0;

  >div {
    margin-top: 15px;

    &:nth-last-child(1) {
      margin-bottom: 0px;
    }
  }
}

.contetn_center {
  flex: 1;
  margin: 0 54px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;

  .contetn_center-bottom {
    height: 315px;
  }
}

.contetn_lr-item {
  height: 310px;
}
</style>
